<script setup lang="ts">
import CdlTable from "@/components/table";
import CdlSearch from "@/components/search";
import AuthenticationInfo from "@/views/vehicleManage/driver/authentication/authenticationInfo.vue";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import {useRouter} from "vue-router";
import {reactive, h, ref} from "vue";
import {Query, State} from "@/interfaces/components/Page";
import {Driver} from "@/interfaces/views/vehicle/driver";
import {FormTree} from "@/interfaces/components/Form";
import {TableTree} from "@/interfaces/components/Table";
import {createPopup} from "@/utils/createPopup";

const router = useRouter()
const request = {
  createdIsNeed: true,
  url: "/slag-truck/driver",
}
const state = reactive<State<Query<Driver>, Driver>>({
  queryForm: {
    status: 3
  },
  dataList: []
})
const searTree: FormTree<Driver> = [
    [
      {label: "车牌号", component: "input", prop: "licensePlate"},
      {label: "司机姓名", component: "input", prop: "name"},
    ]
]
const tree: TableTree<Driver> = {
  colRule: [
    {ti: "司机姓名", prop: "name"},
    {ti: "司机手机号", prop: "mobile"},
    {ti: "申请时间", prop: "filedTime"},
    {ti: "身份证号码", prop: "idNum"},
    // {ti: "人证合一", prop: "peopleLicenseImg"},
    {ti: "备注", prop: "remark"},
  ],
  control: [
    {name: "认证", type: "primary", prop: "id", method: openCreateAuthentication}
  ]
}
/**
 * 打开认证页面
 * @param id
 */
function openCreateAuthentication(id: string){
  createPopup("身份认证信息", h(AuthenticationInfo, {
    id: id,
    query: query
  }))
}

const {query} = useTablePagingTemplate(request, state)
</script>

<template>
  <el-card>
    <CdlSearch :model="state.queryForm" :template-tree="searTree"></CdlSearch>
    <CdlTable :template-tree="tree" :data="state.dataList" :control-width="180"></CdlTable>
  </el-card>
</template>
